<template>
  <div class="home-page">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 品牌标题区域 -->
      <div class="brand-section">
        <div class="brand-logo">
          <span class="logo-text">一句话</span>
          <span class="logo-icon">🧠</span>
          <span class="logo-text">呈所想</span>
        </div>
        <p class="brand-subtitle">与 AI 对话轻松创建应用和网站</p>
      </div>

      <!-- 核心输入区域 - 居中显示 -->
      <div class="input-section">
        <div class="input-container">
          <a-textarea
            v-model:value="promptText"
            placeholder="使用 NoCode 创建一个数据分析看板，用来分析..."
            class="main-input"
            :maxlength="500"
            :bordered="false"
            @keydown="handleKeyDown"
          />
          <div class="input-actions">
            <div class="left-actions">
              <div class="action-buttons">
                <a-button type="text" class="action-btn upload-btn" @click="handleUpload" disabled>
                  <template #icon>
                    <svg viewBox="0 0 24 24" width="14" height="14">
                      <path
                        fill="currentColor"
                        d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"
                      />
                    </svg>
                  </template>
                  上传
                </a-button>
                <a-button
                  type="text"
                  class="action-btn voice-btn"
                  :class="{
                    optimizing: isOptimizing,
                    optimized: isOptimized,
                  }"
                  @click="handleVoice"
                  :loading="isOptimizing"
                  :disabled="isCreating"
                >
                  <template #icon>
                    <svg v-if="!isOptimizing" viewBox="0 0 24 24" width="14" height="14">
                      <path
                        fill="currentColor"
                        d="M12.94,5.29L15.64,10C16.09,10.75 16.09,11.7 15.64,12.44L12.94,17.71C12.34,18.8 11.3,18.8 10.7,17.71L8,12.44C7.5,11.7 7.5,10.75 8,10L10.7,5.29C11.3,4.2 12.34,4.2 12.94,5.29Z"
                      />
                    </svg>
                  </template>
                  {{ getOptimizeButtonText() }}
                </a-button>
              </div>
              <div class="char-count">{{ promptText.length }}/500</div>
            </div>
            <a-button
              type="primary"
              class="generate-btn"
              :loading="isCreating"
              @click="handleCreateApp"
              :disabled="!promptText.trim()"
            >
              <template #icon>
                <svg viewBox="0 0 20 24" width="18" height="18" fill="white">
                  <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z" />
                </svg>
              </template>
            </a-button>
          </div>
        </div>
      </div>

      <!-- 快捷模板区域 -->
      <div class="templates-section">
        <div class="template-cards">
          <div class="template-card" @click="setTemplate('政务风电商页面')">
            <span class="template-text">政务风电商页面</span>
          </div>
          <div class="template-card" @click="setTemplate('企业网站')">
            <span class="template-text">企业网站</span>
          </div>
          <div class="template-card" @click="setTemplate('电商运营后台')">
            <span class="template-text">电商运营后台</span>
          </div>
          <div class="template-card" @click="setTemplate('跟黑记账社区')">
            <span class="template-text">跟黑记账社区</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部精选应用区域 -->
    <div class="featured-apps-section">
      <div class="apps-container">
        <div class="section-header">
          <h2 class="section-title">精选应用</h2>
          <a-button type="primary" class="view-all-btn" @click="goToAppMarket">
            <template #icon>
              <AppstoreOutlined />
            </template>
            全部应用
          </a-button>
        </div>

        <div class="apps-grid">
          <AppCard v-for="app in appsList" :key="app.id" :app="app" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { RocketOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
import { addApp, listGoodAppVoByPage, optimizePrompt } from '@/api/appController'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import { API_BASE_URL } from '@/env'
import AppCard from '@/components/AppCard.vue'

const router = useRouter()
const loginUserStore = useLoginUserStore()

// 响应式数据
const promptText = ref('')
const isCreating = ref(false)

// 优化相关状态
const isOptimizing = ref(false)
const originalPrompt = ref('')
const isOptimized = ref(false)

// 应用列表相关
const appsList = ref<API.AppVO[]>([])
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)

// 设置模板
const setTemplate = (template: string) => {
  promptText.value = `创建一个${template}，包含完整的功能和美观的界面设计`
}

// 上传处理
const handleUpload = () => {
  message.info('上传功能开发中...')
}

// 优化提示词处理
const handleVoice = async () => {
  // 如果正在优化，则取消优化
  if (isOptimizing.value) {
    cancelOptimization()
    return
  }

  // 如果已经优化过，则还原原始内容
  if (isOptimized.value) {
    promptText.value = originalPrompt.value
    isOptimized.value = false
    originalPrompt.value = ''
    message.success('已还原为原始内容')
    return
  }

  // 验证输入长度
  if (promptText.value.trim().length < 10) {
    message.warning('请输入至少10个字符的提示词才能进行优化')
    return
  }

  // 保存原始内容
  originalPrompt.value = promptText.value
  isOptimizing.value = true

  try {
    // 创建SSE连接进行流式优化
    const sseUrl = `${API_BASE_URL}/app/optimize/prompt?message=${encodeURIComponent(promptText.value.trim())}`
    console.log('创建优化SSE连接:', sseUrl)

    const eventSource = new EventSource(sseUrl, {
      withCredentials: true,
    })

    // 清空输入框，准备接收优化后的内容
    promptText.value = ''

    eventSource.onopen = () => {
      console.log('优化SSE连接已建立')
    }

    eventSource.onmessage = (event) => {
      try {
        const data = event.data
        console.log('收到优化SSE数据:', data)

        // 跳过空数据
        if (!data || data.trim() === '') {
          return
        }

        // 尝试解析JSON格式的流式数据
        try {
          const parsedData = JSON.parse(data)
          console.log('解析后的优化数据:', parsedData)

          // 检查是否是业务错误
          if (parsedData && parsedData.error === true && parsedData.message) {
            console.error('优化接口返回业务错误:', parsedData)
            eventSource.close()
            isOptimizing.value = false
            
            // 恢复原始内容
            promptText.value = originalPrompt.value
            originalPrompt.value = ''
            
            // 显示错误信息
            message.error(parsedData.message)
            return
          }

          // 新格式：统一从 data 字段取内容
          if (parsedData && parsedData.data != null) {
            promptText.value += String(parsedData.data)
          }
        } catch (parseError) {
          console.log('JSON解析失败，直接追加数据块:', data)
          // 如果不是JSON，直接追加内容
          promptText.value += data
        }
      } catch (error) {
        console.error('处理优化SSE消息时出错:', error)
      }
    }

    // 监听done事件（正常结束）
    eventSource.addEventListener('done', (event) => {
      console.log('收到优化done事件，流式传输正常结束')
      eventSource.close()
      isOptimizing.value = false
      isOptimized.value = true
      message.success('提示词优化完成！')
    })

    // 监听business-error事件（业务错误）
    eventSource.addEventListener('business-error', (event) => {
      try {
        const data = event.data
        console.error('收到优化business-error事件:', data)
        
        let errorMessage = '优化失败'
        
        // 尝试解析错误信息
        try {
          const errorData = JSON.parse(data)
          if (errorData && errorData.message) {
            errorMessage = errorData.message
          }
        } catch (parseError) {
          console.error('解析business-error数据失败:', parseError)
        }
        
        eventSource.close()
        isOptimizing.value = false
        
        // 恢复原始内容
        promptText.value = originalPrompt.value
        originalPrompt.value = ''
        
        // 显示错误信息
        message.error(errorMessage)
      } catch (error) {
        console.error('处理business-error事件时出错:', error)
      }
    })

    eventSource.onerror = (error) => {
      console.error('优化SSE连接错误:', error)
      console.log('当前连接状态:', eventSource.readyState)

      eventSource.close()
      isOptimizing.value = false

      // 如果没有接收到任何优化内容，恢复原始内容
      if (!promptText.value.trim()) {
        promptText.value = originalPrompt.value
        originalPrompt.value = ''
      }

      message.error('优化过程中出现错误，请检查网络连接')
    }
  } catch (error) {
    console.error('启动优化失败:', error)
    isOptimizing.value = false
    promptText.value = originalPrompt.value
    originalPrompt.value = ''
    message.error('启动优化失败')
  }
}

// 取消优化
const cancelOptimization = () => {
  isOptimizing.value = false
  promptText.value = originalPrompt.value
  originalPrompt.value = ''
  message.info('已取消优化')
}

// 获取优化按钮文本
const getOptimizeButtonText = () => {
  if (isOptimizing.value) return '取消优化'
  if (isOptimized.value) return '还原内容'
  return '优化'
}

// 处理键盘事件
const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    handleCreateApp()
  }
}

// 创建应用
const handleCreateApp = async () => {
  if (!promptText.value.trim()) {
    message.warning('请输入应用描述')
    return
  }

  if (!loginUserStore.loginUser.id) {
    message.warning('请先登录后再创建应用')
    router.push('/user/login')
    return
  }

  try {
    isCreating.value = true
    const res = await addApp({
      initPrompt: promptText.value.trim(),
    })

    if (res.data.code === 0) {
      message.success('应用创建成功！')

      // 清空输入框
      promptText.value = ''

      // 直接跳转到应用详情页
      router.push(`/app/${res.data.data}`)

      // 刷新应用列表
      fetchAppsList()
    } else {
      message.error('创建失败：' + res.data.message)
    }
  } catch (error) {
    console.error('创建应用失败:', error)
    message.error('创建应用失败，请稍后重试')
  } finally {
    isCreating.value = false
  }
}

// 获取精选应用列表
const fetchAppsList = async () => {
  try {
    const res = await listGoodAppVoByPage({
      current: currentPage.value,
      pageSize: pageSize.value,
    })

    if (res.data.code === 0) {
      appsList.value = res.data.data?.records || []
      total.value = res.data.data?.totalRow || 0
    } else {
      message.error('获取应用列表失败：' + res.data.message)
    }
  } catch (error) {
    console.error('获取应用列表失败:', error)
    message.error('获取应用列表失败，请稍后重试')
  }
}

// 分页变化处理
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchAppsList()
}

const handlePageSizeChange = (current: number, size: number) => {
  pageSize.value = size
  currentPage.value = 1
  fetchAppsList()
}

// 跳转到应用广场
const goToAppMarket = () => {
  router.push('/app-market')
}

// 组件挂载时获取应用列表
onMounted(() => {
  fetchAppsList()
})
</script>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
  background: linear-gradient(135deg, rgb(135, 151, 232) 0%, rgb(174, 112, 235) 100%);
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 20px;
  min-height: 80vh;
}

.brand-section {
  text-align: center;
  margin-bottom: 60px;

  .brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: nowrap; // 确保不换行

    .logo-text {
      font-size: 3.5rem;
      font-weight: 700;
      color: white;
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      white-space: nowrap; // 防止文字换行
      flex-shrink: 0; // 防止压缩
    }

    .logo-icon {
      font-size: 3rem;
      background: rgba(170, 104, 228, 0.3);
      backdrop-filter: blur(10px);
      border-radius: 50%;
      padding: 8px;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      flex-shrink: 0; // 防止压缩
    }
  }

  .brand-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    opacity: 0.95;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
}

.input-section {
  width: 100%;
  max-width: 800px;
  margin-bottom: 40px;

  .input-container {
    background: white;
    border-radius: 24px;
    padding: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
      transform: translateY(-2px);
    }

    .main-input {
      border: none;
      font-size: 1.1rem;
      line-height: 1.6;
      resize: vertical;
      padding: 20px 24px 16px;
      height: 80px;
      min-height: 80px;
      max-height: 200px;

      &:focus {
        box-shadow: none;
      }

      ::placeholder {
        color: #999;
        font-size: 1rem;
      }
    }

    .input-actions {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 8px 20px 16px;
      position: relative;

      .left-actions {
        position: absolute;
        bottom: 16px;
        left: 20px;
        display: flex;
        align-items: center;
        gap: 8px;

        .action-buttons {
          display: flex;
          gap: 6px;

          .action-btn {
            height: 32px;
            padding: 0 12px;
            border-radius: 16px;
            font-size: 0.85rem;
            color: #666;
            
            &.upload-btn:disabled {
              color: #ccc !important;
              background-color: #f8f8f8 !important;
              border-color: #e8e8e8 !important;
              cursor: not-allowed;
              opacity: 0.6;
            }
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.25s ease;
            background: rgba(0, 0, 0, 0.02);
            border: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

            &:hover {
              background: rgba(102, 126, 234, 0.08);
              color: #667eea;
              border-color: rgba(102, 126, 234, 0.2);
              transform: translateY(-1px);
              box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
            }

            &:active {
              transform: translateY(0);
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            &.optimizing {
              background: rgba(255, 193, 7, 0.1);
              color: #ffc107;
              border-color: rgba(255, 193, 7, 0.3);

              &:hover {
                background: rgba(255, 193, 7, 0.15);
                color: #ffc107;
                border-color: rgba(255, 193, 7, 0.4);
              }
            }

            &.optimized {
              background: rgba(40, 167, 69, 0.1);
              color: #28a745;
              border-color: rgba(40, 167, 69, 0.3);

              &:hover {
                background: rgba(40, 167, 69, 0.15);
                color: #28a745;
                border-color: rgba(40, 167, 69, 0.4);
              }
            }
          }
        }

        .char-count {
          font-size: 0.75rem;
          color: #999;
          margin-left: 12px;
          padding: 4px 8px;
          background: rgba(0, 0, 0, 0.02);
          border-radius: 10px;
          border: 1px solid rgba(0, 0, 0, 0.04);
        }
      }

      .generate-btn {
        height: 44px;
        width: 44px;
        border-radius: 22px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        margin-left: auto;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);

        &:hover:not(:disabled) {
          transform: scale(1.05) translateY(-1px);
          box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

        &:active:not(:disabled) {
          transform: scale(1.02);
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
          transform: none;
        }

        svg {
          fill: white !important;
        }
      }
    }
  }
}

.templates-section {
  .template-cards {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap; // 确保不换行
    justify-content: center;
    overflow-x: auto; // 在内容过宽时允许水平滚动
    padding: 0 10px; // 添加内边距防止边缘裁切

    // 隐藏滚动条但保持功能
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;

    .template-card {
      background: rgba(255, 255, 255, 0.8);
      border-radius: 20px;
      padding: 8px 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.9rem;
      color: #666;
      border: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10px);
      flex-shrink: 0; // 防止卡片被压缩

      &:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        color: #333;
      }

      .template-text {
        white-space: nowrap;
      }
    }
  }
}

.featured-apps-section {
  background: rgba(255, 255, 255, 0.95);
  padding: 60px 0px;
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);

  .apps-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;

    // 响应式内边距调整
    @media (max-width: 1023px) {
      padding: 0 20px;
    }

    @media (max-width: 639px) {
      padding: 0 16px;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
      flex-wrap: nowrap; // 确保不换行
      gap: 16px; // 添加间距以防内容过于接近

      .section-title {
        font-size: 2rem;
        font-weight: 600;
        color: #333;
        margin: 0;
        white-space: nowrap; // 防止标题换行
        flex-shrink: 0; // 防止标题被压缩

        // 响应式字体大小
        @media (max-width: 1023px) {
          font-size: 1.75rem;
        }

        @media (max-width: 639px) {
          font-size: 1.5rem;
        }

        @media (max-width: 480px) {
          font-size: 1.3rem;
        }

        @media (max-width: 320px) {
          font-size: 1.1rem;
        }
      }

      .view-all-btn {
        height: 40px;
        padding: 0 20px;
        border-radius: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
        transition: all 0.3s ease;
        flex-shrink: 0; // 防止按钮被压缩
        white-space: nowrap; // 防止按钮文字换行

        // 响应式按钮尺寸
        @media (max-width: 639px) {
          height: 36px;
          padding: 0 16px;
          font-size: 14px;
        }

        @media (max-width: 480px) {
          height: 32px;
          padding: 0 12px;
          font-size: 13px;
          border-radius: 16px;
        }

        @media (max-width: 320px) {
          height: 28px;
          padding: 0 10px;
          font-size: 12px;
          border-radius: 14px;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        &:active {
          transform: translateY(0);
        }
      }
    }

    .apps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      margin-bottom: 40px;

      // 确保最大列数不超过4列
      @media (min-width: 1400px) {
        grid-template-columns: repeat(4, 1fr);
      }

      // 大屏幕 - 3列
      @media (max-width: 1399px) and (min-width: 1024px) {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }

      // 平板 - 2列
      @media (max-width: 1023px) and (min-width: 640px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }

      // 手机 - 1列
      @media (max-width: 639px) {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 1023px) {
  .featured-apps-section {
    padding: 50px 0;
  }
}

@media (max-width: 768px) {
  .featured-apps-section {
    padding: 40px 0;
  }
  .main-content {
    padding: 40px 20px;
    min-height: 70vh;
  }

  .brand-section {
    margin-bottom: 40px;

    .brand-logo {
      gap: 10px; // 稍微减少间距以适应较小屏幕

      .logo-text {
        font-size: 2.5rem;
      }

      .logo-icon {
        font-size: 2rem;
        width: 50px;
        height: 50px;
      }
    }

    .brand-subtitle {
      font-size: 1.1rem;
    }
  }

  .input-section {
    .input-container {
      .input-actions {
        padding: 6px 16px 12px; // 减少内边距以适应小屏幕
        position: relative; // 保持相对定位

        .left-actions {
          position: absolute;
          bottom: 12px;
          left: 16px;
          display: flex;
          align-items: center;
          gap: 6px; // 减少间距

          .action-buttons {
            display: flex;
            gap: 4px; // 减少按钮间距

            .action-btn {
              height: 28px; // 稍微减小按钮高度
              padding: 0 10px; // 减少内边距
              font-size: 0.8rem; // 稍微减小字体
              border-radius: 14px; // 调整圆角
            }
          }

          .char-count {
            font-size: 0.7rem; // 减小字体
            margin-left: 8px;
            padding: 3px 6px; // 减少内边距
          }
        }

        .generate-btn {
          height: 40px; // 稍微减小生成按钮
          width: 40px;
          border-radius: 20px;
        }
      }
    }
  }

  .templates-section {
    .template-cards {
      gap: 8px;
      padding: 0 5px; // 减少内边距以适应小屏幕

      .template-card {
        font-size: 0.8rem;
        padding: 6px 12px;
        border-radius: 16px; // 稍微减少圆角
      }
    }
  }

  .apps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .featured-apps-section {
    padding: 40px 0px;

    .apps-container {
      .section-header {
        margin-bottom: 30px;
        gap: 10px; // 减少间距以适应小屏幕
      }
    }
  }
}

@media (max-width: 480px) {
  .brand-section {
    .brand-logo {
      gap: 8px; // 进一步减少间距

      .logo-text {
        font-size: 2rem;
      }

      .logo-icon {
        font-size: 1.8rem;
        width: 45px;
        height: 45px;
        padding: 6px;
      }
    }

    .brand-subtitle {
      font-size: 1rem;
      padding: 0 10px; // 添加内边距防止文字溢出
    }
  }

  .input-section {
    .input-container {
      margin: 0 -10px;

      .input-actions {
        padding: 4px 12px 10px; // 进一步减少内边距

        .left-actions {
          bottom: 10px;
          left: 12px;
          gap: 4px; // 最小间距

          .action-buttons {
            gap: 3px; // 最小按钮间距

            .action-btn {
              height: 26px; // 进一步减小按钮高度
              padding: 0 8px; // 最小内边距
              font-size: 0.75rem; // 更小字体
              border-radius: 13px;
            }
          }

          .char-count {
            font-size: 0.65rem; // 更小字体
            margin-left: 6px;
            padding: 2px 5px; // 最小内边距
          }
        }

        .generate-btn {
          height: 36px; // 进一步减小生成按钮
          width: 36px;
          border-radius: 18px;
        }
      }
    }
  }

  .apps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .templates-section {
    .template-cards {
      gap: 6px;
      padding: 0 5px;

      .template-card {
        font-size: 0.75rem;
        padding: 5px 10px;
        border-radius: 14px;
      }
    }
  }
}

// 添加更小屏幕的支持 (320px及以下)
@media (max-width: 320px) {
  .brand-section {
    .brand-logo {
      gap: 6px; // 最小间距

      .logo-text {
        font-size: 1.7rem; // 进一步缩小字体
      }

      .logo-icon {
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
        padding: 5px;
      }
    }

    .brand-subtitle {
      font-size: 0.9rem;
      padding: 0 5px;
    }
  }

  .input-section {
    .input-container {
      .input-actions {
        padding: 3px 8px 8px; // 极小内边距

        .left-actions {
          bottom: 8px;
          left: 8px;
          gap: 2px; // 极小间距

          .action-buttons {
            gap: 2px; // 极小按钮间距

            .action-btn {
              height: 24px; // 最小按钮高度
              padding: 0 6px; // 极小内边距
              font-size: 0.7rem; // 极小字体
              border-radius: 12px;
            }
          }

          .char-count {
            font-size: 0.6rem; // 极小字体
            margin-left: 4px;
            padding: 1px 4px; // 极小内边距
          }
        }

        .generate-btn {
          height: 32px; // 最小生成按钮
          width: 32px;
          border-radius: 16px;
        }
      }
    }
  }

  .featured-apps-section {
    .apps-container {
      .section-header {
        margin-bottom: 25px;
        gap: 8px; // 极小间距
      }
    }
  }

  .templates-section {
    .template-cards {
      gap: 4px; // 最小间距
      padding: 0 2px;

      .template-card {
        font-size: 0.7rem;
        padding: 4px 8px;
        border-radius: 12px;
      }
    }
  }
}
</style>
